<template>
	<view class="introduce-container">
		<!-- 顶部标题 -->
		<view class="header">
			<image src="https://admin.cqycgyl.com/uploads/20250910/5190cc5c7d8371af29330ad47fa981f4.png"></image>
			<text class="subtitle">推荐商家赚佣金，佣金实时结算，收益清晰可见。</text>
		</view>

		<!-- 套餐卡片区域 -->
		<scroll-view class="scroll-view" scroll-y>
			<view class="packages-container">
				<!-- 第一行：1个月和3个月套餐 -->
				<view class="package-row">
					<!-- 1个月套餐 -->
					<view class="package-card" v-for="(item,index) in package_config" :key="index"
						:class="{ 'active': selectedPackage === index }" @click="selectPackage(index)">
						<view class="package-header">
							<view class="front">
								<text class="package-price"><text class="fuhao">¥</text>{{ item.pay_money }}</text>
								<text class="package-title">{{ item.pay_title }}({{ item.days }}天)</text>
							</view>
							<view class="middle"></view>
							<view class="back"></view>
						</view>
						<view class="package-features">
							<view class="feature-item">
								<image
									src="https://admin.cqycgyl.com/uploads/20250911/173060f5716907d6ae99162ebbdf13c7.png">
								</image>
								<text class="feature-text">赠送等额购物券</text>
							</view>
							<view class="feature-item">
								<image
									src="https://admin.cqycgyl.com/uploads/20250911/173060f5716907d6ae99162ebbdf13c7.png">
								</image>
								<text class="feature-text">专属推广码</text>
							</view>
							<view class="feature-item">
								<image
									src="https://admin.cqycgyl.com/uploads/20250911/173060f5716907d6ae99162ebbdf13c7.png">
								</image>
								<text class="feature-text">数据统计</text>
							</view>
						</view>
						<!-- <view class="package-footer">
							<text class="package-duration">{{ item.days }}天</text>
						</view> -->
					</view>


				</view>

			</view>
		</scroll-view>

		<!-- 底部操作区域 -->
		<view class="bottom-actions">
			<!-- 同意服务条款 -->
			<view class="terms-section">
				<view class="checkbox-wrapper" @click="toggleAgreement">
					<view class="checkbox" :class="{ 'checked': isAgreed }">
						<text v-if="isAgreed" class="check-icon">✓</text>
					</view>
					<text class="terms-text">我已阅读并同意</text>
					<text class="terms-link" @click.stop="showTerms">《服务条款》</text>
				</view>
			</view>

			<!-- 同意按钮 -->
			<view class="button-section">
				<button class="agree-btn" :class="{ 'disabled': !isAgreed }" @click="handleAgree" :disabled="!isAgreed">
					{{ isExpert ? '¥'+package_config[selectedPackage]['pay_money']+'确认续费': '生成专属推荐二维码'}}
				</button>
			</view>
		</view>

		<!-- 服务条款弹窗 -->
		<view class="terms-modal" v-if="showTermsModal" @click="hideTerms">
			<view class="terms-content" @click.stop>
				<view class="terms-header">
					<text class="terms-title">服务条款</text>
					<text class="terms-close" @click="hideTerms">×</text>
				</view>
				<scroll-view class="terms-body" scroll-y>
					<view class="terms-detail">
						<view class="terms-section-title">尊敬的用户：</view>
						<view class="terms-paragraph">
							为保障您的合法权益，请在开通推荐达人服务前仔细阅读以下条款，您的订阅行为将视为对本须知内容的认可与接受：
						</view>
						<view class="terms-paragraph">
							2. 平台将为推荐达人提供专属推广码、数据统计、佣金结算等服务支持。
						</view>

						<view class="terms-section-title">一、服务费用说明</view>
						<view class="terms-paragraph">
							1. 推荐达人服务费为一次性支付费用，支付成功后不支持任何形式的退款（包括但不限于主动申请退款、因个人原因未使用服务、账号异常等情况）。
						</view>
						<view class="terms-paragraph">
							2. 服务费金额及支付方式以平台展示及您实际支付为准。
						</view>
						<view class="terms-section-title">二、推荐达人有效期与权益说明</view>

						<view class="terms-paragraph">
							1. 推荐达人服务自支付成功之日起生效，有效期以您所订阅的服务周期为准（如月度、年度等），具体到期时间可在推荐达人中心查询。
						</view>
						<view class="terms-paragraph">
							2. 推荐达人有效期到期后自动失效，平台将不再另行通知。
						</view>
						<view class="terms-paragraph">
							3. 推荐达人失效后，您将不再享受任何推荐达人专属权益（包括但不限于专属内容、平台佣金奖励、功能权限等），相关权益不可延续、兑换或折现。
						</view>

						<view class="terms-section-title">三、其他说明</view>
						<view class="terms-paragraph">
							1. 请您妥善保管账号信息，因账号泄露、转借等导致的服务风险，由您自行承担。

						</view>
						<view class="terms-paragraph">
							2. 平台有权根据业务调整会员权益内容，如有变动将通过官方渠道公示，不另行单独通知。
						</view>

						<view class="terms-section-title">五、协议修改</view>
						<view class="terms-paragraph">
							3. 如您对推荐达人服务有疑问，可联系客服400-885-8872咨询
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: '',
				isAgreed: false,
				selectedPackage: "one_month", // 默认选择1个月套餐,
				socket: null,
				package_config: [],
				showTermsModal: false,
				isExpert: false
			}
		},
		onLoad() {
			let _this = this;
			if (!this.vuex_token) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return;
			}

			this.$u.api.user.getPackageConfig().then(res => {
				if (res.code == 1) {
					this.package_config = res.data
				}
			})

			uni.connectSocket({
				url: 'wss://admin.cqycgyl.com/ws?user_id=' + this.vuex_user.user_id,
				success: (res) => {
					this.socket = res.socket;
					console.log("连接成功!", this.vuex_user.user_id)
				}
			})

			uni.onSocketMessage((res) => {
				console.log('收到消息:', res.data);
				let data = JSON.parse(res.data);

				if (data.type == 'msg' && data.message == "success") {

					uni.showToast({
						title: data.message,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/recommend/index'
						})
					}, 1000)
				}
			});
		},
		watch: {
			isExpert(newVal) {
				console.log('isExpert', newVal)
				if (newVal) {
					this.isAgreed = true
				} else {
					this.isAgreed = false
				}
			}
		},
		onShow() {
			let _this = this;
			this.$u.api.recommend.isExpert().then(res => {
				if (res.code == 1) {
					_this.isExpert = true
				}
			})
		},
		computed: {

		},
		methods: {
			// 选择套餐
			selectPackage(months) {
				this.selectedPackage = months;
			},

			// 切换同意状态
			toggleAgreement() {
				this.isAgreed = !this.isAgreed;
			},

			// 处理同意成为推荐达人
			handleAgree() {
				if (!this.selectedPackage) {
					this.$u.toast('请选择套餐');
					return;
				}

				if (!this.isAgreed) {
					this.$u.toast('请先同意服务条款');
					return;
				}
				if (this.selectPackage == 0) {
					this.$u.toast('请选择套餐');
					return;
				}

				// 调用成为推荐达人的API
				this.$u.api.user.becomeRecommender({
					package: this.package_config[this.selectedPackage].key
				}).then(res => {
					if (res.code === 1) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: (ress) => {
								console.log('success:' + JSON.stringify(ress));
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								})

								if (ress.errMsg == 'requestPayment:ok') {
									uni.showToast({
										title: '支付成功',
										icon: 'success'
									})
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/recommend/index'
										})
									}, 1000)
								}
							},
							fail: () => {
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								})
							}
						})
					} else {
						this.$u.toast(res.msg || '申请失败，请重试');
					}
				}).catch(err => {
					console.error('申请推荐达人失败:', err);
					this.$u.toast('网络错误，请重试');
				});
			},

			// 显示服务条款
			showTerms() {
				this.showTermsModal = true;
			},

			// 隐藏服务条款
			hideTerms() {
				this.showTermsModal = false;
			}
		}
	}
</script>

<style scoped>
	.introduce-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		box-sizing: border-box;
	}

	.header {
		background-color: #FFE9E9;
		height: 82rpx;
		line-height: 82rpx;
		height: 82rpx;
		padding-left: 30rpx;
	}

	.header image {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
		margin-right: 12rpx;
	}

	.header .title {
		font-size: 48rpx;
		font-weight: bold;
		color: #ffd700;
		margin-bottom: 10rpx;
		display: block;
	}

	.header .subtitle {
		font-size: 24rpx;
		display: inline-block;
		font-weight: 400;
		font-size: 24rpx;
		color: #F24040;
	}

	.scroll-view {
		flex: 1;
		background: transparent;
		overflow-y: scroll;
	}

	.packages-container {
		padding: 30rpx;
	}

	.package-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		flex-wrap: wrap;
		gap: 22rpx;
	}

	.package-card {
		flex: 1;
		border-radius: 24rpx;
		padding: 20rpx;
		padding-top: 44rpx;
		position: relative;
		min-width: 300rpx;
		background: white;
	}

	.package-card:first-child {
		margin-left: 0;
	}

	.package-card:last-child {
		margin-right: 0;
	}


	.package-card:first-child .package-header .front {
		background-image: url("https://admin.cqycgyl.com/uploads/20250911/cedfab2946350ee98280e21223c268dc.png");
	}

	.package-card:nth-child(2) .package-header .front {
		background-image: url("https://admin.cqycgyl.com/uploads/20250911/96be468a3e6c8163c2483c23053847ad.png");
	}

	.package-card:nth-child(3) .package-header .front {
		background-image: url("https://admin.cqycgyl.com/uploads/20250911/3530afe153deecb8ba47424b970c2b05.png");
	}

	.package-card:last-child .package-header .front {
		background-image: url("https://admin.cqycgyl.com/uploads/20250911/40dbb88bef0f79e6ee8afd0e8c366fdc.png");
	}

	.package-card .package-header .middle {
		position: absolute;
		top: 0rpx;
		width: 270rpx;
		border-radius: 12rpx;
		opacity: 0.4;
		height: 126rpx;
		transform: translate(5%, -9%);
	}

	.package-card:first-child .package-header .middle {
		background: #FA8B2B;
	}

	.package-card:nth-child(2) .package-header .middle {
		background: #6FC4FA;
	}

	.package-card:nth-child(3) .package-header .middle {
		background: #5DDAA4;
	}

	.package-card:last-child .package-header .middle {
		background: #A5AFF4;
	}

	.package-card .package-header .back {
		padding: 0px;
		position: absolute;
		top: 0rpx;
		border-radius: 12rpx;
		transform: translate(13%, -23%);
		width: 234rpx;
		height: 110rpx;
		opacity: 0.15;
	}

	.package-card:first-child .package-header .back {
		background: #FA8B2B;

	}

	.package-card:nth-child(2) .package-header .back {
		background: #6FC4FA;

	}

	.package-card:nth-child(3) .package-header .back {
		background: #5DDAA4;
	}

	.package-card:last-child .package-header .back {
		background: #A5AFF4;
	}




	.package-card.active {
		border: 2rpx solid #1DC57C;
	}

	.package-header {
		position: relative;
	}

	.package-header .front {
		padding: 20rpx 0rpx 20rpx 20rpx;
		margin-bottom: 40rpx;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		z-index: 99999;
	}

	.package-header view {
		height: 100%;
	}

	.package-title {
		padding-bottom: 26rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		display: block;
	}

	.package-price .fuhao {
		font-size: 24rpx;
		margin-right: 12rpx
	}

	.package-price {
		font-weight: bold;
		color: #ffd700;
		display: block;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-bottom: 13rpx;
	}

	.discount-badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
		color: #ffffff;
		font-size: 18rpx;
		padding: 6rpx 12rpx;
		border-radius: 16rpx;
		font-weight: bold;
	}

	.package-features {
		margin-bottom: 20rpx;
	}

	.feature-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.feature-item image {
		width: 24rpx;
		height: 34rpx;
		margin-right: 10rpx;
	}

	.feature-text {
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		flex: 1;
	}

	.package-footer {
		border-top: 1rpx solid #333333;
		padding-top: 15rpx;
	}

	.package-duration {
		font-size: 22rpx;
		color: #999999;
	}

	.bottom-actions {
		background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
		padding: 30rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
	}

	.agreement-section {
		margin-bottom: 40rpx;
	}

	.agreement-section .checkbox-wrapper {
		display: flex;
		padding: 20rpx 0;
	}

	.agreement-section .checkbox-wrapper .checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #666666;
		border-radius: 6rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		transition: all 0.3s ease;
	}

	.agreement-section .checkbox-wrapper .checkbox.checked {
		background-color: #ffd700;
		border-color: #ffd700;
	}

	.agreement-section .checkbox-wrapper .checkbox.checked .check-icon {
		color: #1a1a1a;
		font-size: 24rpx;
		font-weight: bold;
	}

	.agreement-section .checkbox-wrapper .agreement-text {
		font-size: 28rpx;
		color: #cccccc;
		flex: 1;
	}

	.button-section .agree-btn {
		width: 100%;
		height: 88rpx;
		background: #F16325;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		line-height: 88rpx;
	}

	.button-section .agree-btn:active {
		transform: scale(0.98);
	}

	.button-section .agree-btn.disabled {
		background: #666666;
		color: #999999;
		box-shadow: none;
	}

	.button-section .agree-btn.disabled:active {
		transform: none;
	}

	/* 服务条款相关样式 */
	.terms-section {
		margin-bottom: 30rpx;
	}

	.terms-section .checkbox-wrapper {
		display: flex;
		align-items: center;
	}

	.terms-section .checkbox-wrapper .checkbox {
		width: 30rpx;
		height: 30rpx;
		border-radius: 80rpx 80rpx 80rpx 80rpx;
		margin-right: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		transition: all 0.3s ease;
		opacity: 0.87;
		border: 3rpx solid #A4A4A4;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
	}

	.terms-section .checkbox-wrapper .checkbox.checked {
		background: white;
		border-color: A4A4A4;
	}

	.terms-section .checkbox-wrapper .checkbox.checked .check-icon {
		color: #F16325;
		font-size: 24rpx;
		font-weight: bold;
	}

	.terms-section .checkbox-wrapper .terms-text {
		font-size: 24rpx;
		color: #999999;
	}

	.terms-section .checkbox-wrapper .terms-link {
		color: #F16325;
		font-size: 24rpx
		
	}

	/* 服务条款弹窗样式 */
	.terms-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999999;
	}

	.terms-content {
		background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
		border-radius: 20rpx;
		overflow: hidden;
		width: 90%;
		max-height: 80%;
		display: flex;
		flex-direction: column;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.5);
	}

	.terms-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #333333;
		background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
	}

	.terms-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #ffd700;
	}

	.terms-close {
		font-size: 48rpx;
		color: #cccccc;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: all 0.3s ease;
	}

	.terms-close:active {
		background-color: rgba(255, 255, 255, 0.1);
	}

	.terms-body {
		flex: 1;
		padding: 30rpx;
		max-height: 60vh;
		box-sizing: border-box;
	}

	.terms-detail {
		color: #cccccc;
		font-size: 28rpx;
		line-height: 1.8;
	}

	.terms-section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #ffd700;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}

	.terms-section-title:first-child {
		margin-top: 0;
	}

	.terms-paragraph {
		margin-bottom: 20rpx;
		text-align: justify;
	}
</style>